<template>
  <div>
	<div id="main">

  </div>
  </div>
</template>

<script>
	import * as echarts from 'echarts'
	import $ from "jquery"
	export default {
		name: 'hisogram',
		props:{
		},
		data() {
			return {
        echartsList:[],
        list:[],
				url: {
					getEcharts: "/web/program/getEcharts",
				},
			}
		},
		mounted() {
		},
		methods: {
			async drawLine(echartsList) {
        console.log(echartsList)
        this.echartsList = echartsList
        this.list = this.echartsList[0]
        if(echartsList !=null && echartsList.length > 0){
          let units = []
          let ylist = []
          let xlist = []
          let legends = []
          let unitStrings = []
          this.echartsList.forEach(e => {
            let ylist1 = []
            e.forEach(e1 =>{
              ylist1.push(e1.value)
              if(xlist.indexOf(e1.year_date) == -1){
                xlist.push(e1.year_date)
              }
            })
            let legend = '图例一'
            if(e[0].child_kind != undefined){
              legend = e[0].child_kind
            }
            if(e[0].type != undefined){
              legend = e[0].type
            }
            if(e[0].category_country != undefined){
              legend = e[0].category_country
            }
            if(e[0].target != undefined){
              legend = e[0].target
            }
            legends.push(legend)
            let param = {
            		name: legend,
            		type: 'bar',
                right: 10,
            		// stack: 'Total',
            		data: ylist1,
            }
            let unit = "万吨"
            if(e[0].unit != undefined && unitStrings.indexOf(e[0].unit) == -1){
              if(unitStrings.length == 1){
                param.yAxisIndex = 1
               param.type = 'line'
              }
              unitStrings.push(e[0].unit)
            }
            ylist.push(param)
          })
          unitStrings.forEach(e => {
            units.push({
          		type: 'value',
          		name: e
          	})
          })
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('main'))
          let title = ""
          if(this.list[0].child_kind != undefined){
            title = title + this.list[0].child_kind
          }
          if(this.list[0].type != undefined){
            title = title +  this.list[0].type
          }
          if(this.list[0].category_country != undefined){
            title = title +"-" + this.list[0].category_country
          }
          if(this.list[0].target != undefined){
            title = title +"-" + this.list[0].target
          }
          if(this.list[0].area != undefined){
            title = title + "-" + this.list[0].area +"统计"
          }
          let unit = "万吨"
          if(this.list[0].unit != undefined){
            unit = this.list[0].unit
          }
          // 绘制图表
          let option = {
            grid:{
              x:100,
              y:100,
              y2:200
            },
          	title: {
          		text: title,
              x:"center"
          	},
          	xAxis: {
          		// type:'category',
          		data: xlist
          	},
          	yAxis: units,
          	legend: {
          		data: legends,
              right: 100,
          		textStyle: {
          			fontSize: '18'
          		}
          	},
          	series: ylist,
          	tooltip: {
          		trigger: 'axis',
          		axisPointer: {
          			type: 'shadow',
          			label: {
          				show: true
          			}
          		},
          		backgroundColor: 'rgba(0,0,0,0.5)',
          		textStyle: {
          			color: '#ffffff'
          		}
          	},
            dataZoom: {
                orient:"horizontal", //水平显示
                backgroundColor:'#F2F3F5',
                 borderColor: "#F2F3F5",
                show:true, //显示滚动条
                // showDataShadow: false,
                handleStyle: {
                borderWidth: 0,
                color: '#2697ff'
                },
                // fillerColor: '#F2F3F5',
                showDataShadow: false,
                xAxisIndex: [0],
                handleSize: '60%',
                handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                start:0, //起始值为0%
                end:100  ,//结束值为40%
                bottom: 150,
                height:'20'
            }
          }
          myChart.setOption(option);
        }
			}
		}
	}
</script>

<style lang="scss">
	#main {
		width: 105%;
		height: 71vh;
		padding-top: 4vh;
	}
</style>
